<template>
  <div>
    <div class="operate-btn">
      <el-button size="mini" class="btn" type="primary" @click="readFn"
        >全部已读</el-button
      >
    </div>
    <!-- <div class="tableBox">
      <div class="tableBoxChild">
        <el-table :data="tableData">
          <el-table-column label="序号" align="center" type="index">
          </el-table-column>
          <el-table-column prop="customerNm" label="客户名称" align="center">
          </el-table-column>
          <el-table-column prop="creditLine" label="授信额度" align="center">
          </el-table-column>
          <el-table-column prop="remainingDueDate" label="剩余到期天数" align="center">
          </el-table-column>
          <el-table-column prop="reminderDate" label="提醒日期" align="center">
          </el-table-column>
          <el-table-column prop="expirationDate" label="到期日期" align="center">
          </el-table-column>
          <el-table-column prop="status" label="消息状态" align="center">
          </el-table-column>
        </el-table>
      </div>
      <el-pagination small background layout="prev, pager, next" :total="total" @current-change="pageFn">
      </el-pagination>
    </div> -->
    <div class="tableBox table-panel">
      <div class="tableBoxChild">
        <CommonTable
          :tableColumns="tableColumns"
          :tableData="tableData"
          :page="page"
          @handerSortChange="handerSortChange"
          @filterTable="filterTable"
        />
      </div>
      <div class="con-footer pagination" style="float: right">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import CommonTable from '@/components/CommonTable';
import { updateStatue, reminderQuery } from '@/api/customerList/index.js';
export default {
  name: 'RemindersFour',
  components: {
    Pagination,
    CommonTable,
  },
  data() {
    return {
      page: {
        page: 1,
        size: 10,
      },
      tableColumns: [
        {
          column: 'customerNm',
          label: '客户名称',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 120,
          sortable: false, // true, false, 'custom'(远程handerSortChange)
          headerFilter: true,
          filterType: 'input', // select,input,date,daterange,空
          filterValue: 'customerNm',
        },
        {
          column: 'creditLine',
          label: '授信额度',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 100,
          sortable: false,
          headerFilter: false,
          // filterType: "input",
          // filterValue: "text",
        },
        {
          column: 'remainingDueDate',
          label: '剩余到期天数',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 100,
          sortable: false,
          headerFilter: false,
          filterType: 'input', // select,input,date,daterange,空
          filterValue: 'remainingDueDate',
        },
        {
          column: 'reminderDate',
          label: '提醒日期',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 140,
          sortable: false,
          headerFilter: true,
          filterType: 'date',
          filterValue: '',
        },
        {
          column: 'expirationDate',
          label: '到期日期',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 140,
          sortable: false,
          headerFilter: true,
          filterType: 'date',
          filterValue: '',
        },
        {
          column: 'status',
          label: '消息状态',
          align: 'left',
          overflow: true, // 超出长度
          show: true, // 是否显示
          sortable: false,
          // width: 120,
          headerFilter: true,
          filterType: 'select', // select,input,date,daterange,空
          filterValue: [],
          headerFilterList: [
            {
              text: '1',
              value: '未读',
              id: '1',
            },
            {
              text: '2',
              value: '已读',
              id: '2',
            },
          ],
        },
      ],
      tableData: [],
      total: 0,
      count: '',
    };
  },
  props: {
    position: String,
  },
  mounted() {
    this.reminderQueryFn(this.position);
  },

  methods: {
    // 远程排序
    handerSortChange({ column, prop, order }) {
      console.log('sortChange 点击排序', column, prop, order);
    },
    async reminderQueryFn(index) {
      const res = await reminderQuery({
        pageNum: 1,
        pageSize: 10,
        type: index,
      });
      console.log(res, '777');
    },
    // 远程搜索
    filterTable(obj) {
      console.log('filterTable 点击筛选', obj);
    },
    async readFn() {
      const res = await updateStatue({ type: this.position, statue: true });
      this.tableData = res.data;
    },
    pageFn(currentPage) {
      // queryBondProbabilityDetail({
      //   bondId: this.bondInfo.bondId,
      //   page: currentPage,
      //   pn: 10,
      // }).then((res) => {
      //   this.tableData = res.data.result;
      //   this.total = Number(res.data.totalResults);
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.operate-btn {
  padding: 10px 10px 0 10px;
}

.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.tableBox {
  background-color: #262d47;
  flex: 1;
  padding: 15px 10px;
}

.tableBoxChild {
  min-height: 500px;
}

.el-pagination {
  text-align: right;
}
</style>
